<template>
	<view class="menu_box" v-if="isShowMenu">
		<view class="menu">
			<swiper circular :current="curIndex">
				<swiper-item v-for="(item, index) in swiperLen" :key="item">
					<view class="title" v-if="curIndex === 1 && historyMusic.length > 0">历史播放</view>
					<view class="title" v-if="curIndex === 0">当前播放</view>
					<scroll-view scroll-y class="swiper-item-scroll">
						<view class="scroll-item" @click="handleMusicPlay(index, false)" v-if="curIndex === 1 && historyMusic.length > 0"></view>
						<view class="scroll-item" @click="handleMusicPlay(index, true)" v-else-if="curIndex === 0" v-for="(item, index) in musicPlaylist" :key="item.id">
							<view class="text_ellipsis">
								<text class="name">{{ item.name }}</text>
								<text>-</text>
								<text class="singer">{{ item.ar[0].name }}</text>
							</view>
						</view> 
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask" @click="closeMenu"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// swiper 项的个数
				swiperLen: 2,
				// 播放列表
				musicPlaylist: uni.getStorageSync('musicPlaylist'),
				// 历史播放音乐列表
				historyMusic: [],
				// swiper当前所在的索引值
				curIndex: 0,
				// 是否显示该组件
				isShow: false
			}
		},
		props: {
			// 父级传过来用于判断是否显示该组件的布尔值
			isShowMenu: {
				type: Boolean,
				default: false,
			}
		},
		created() {
			// 更新swiper项的个数
			this.swiperLen = this.historyMusic.length > 0 ? 2 : 1
		},
		methods: {
			// 用户点击菜单列表中某一项时触发
			handleMusicPlay(curIndex, type) {
				if (!type) {
					let musicPlaylist = uni.getStorageSync('musicPlaylist')
					// 有历史播放数据时
					for (let i of musicPlaylist) {
						if (i.id != this.historyMusic[curIndex].id) {
							musicPlaylist.splice(index, 0, this.historyMusic[curIndex])
							// 更新本地中的数据
							uni.setStorageSync('musicPlaylist', musicPlaylist)
							// 更新 vuex 中的 播放列表数据
							this.$store.commit('CHANGEMUSICPLAYLIST', musicPlaylist)
						}
					}
				}
				// 更新父级组件的当前播放音乐的索引值
				this.$emit('musicPlay', curIndex)
			},
			closeMenu() {
				// 销毁当前组件
				this.$emit('showMenu', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu_box {
		.menu {
			height: 40vh;
			border-radius: 20rpx;
			background-color: #ffffff;
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			bottom: 20vh;
			z-index: 999;
			swiper {
				width: 100%;
				height: 100%;
				.title {
					line-height: 50rpx;
					font-weight: bold;
					padding-left: 30rpx;
				}
				.swiper-item-scroll {
					width: 100%;
					height: calc(100% - 50rpx);
					.scroll-item {
						display: flex;
						height: 80rpx;
						align-items: center;
						letter-spacing: 2rpx;
						width: 700rpx;
						padding: 0 20rpx;
						.singer {
							color: #C8C7CC;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		.mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
</style>
